<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<!-- serch -->
		<div class="search">
			<div class="searchBot f f-a-c f-j-b">
				<div class="inpBox f f-a-c">
					<input type="text" class="inp" v-model="search" placeholder="Search.." name="" id="" />
					<div @click="goSearch" class="scheBtn f f-a-c f-j-c hand"><img src="/src/assets/sche.png" class="scheImg" alt="" /></div>
				</div>
				<div class="rigTab f f-a-c">
					<div class="rigTitle">Popular:</div>
					<div class="tabsTit hand" @click="search = item.value" v-for="(item, index) in port.messageList">{{ item.value }}</div>
					<!-- <div class="tabsTit">Venture Capital</div>
					<div class="tabsTit">Career Pivot</div>
					<div class="tabsTit">Law</div> -->
				</div>
			</div>
		</div>
		<!-- tabs -->
		<div class="waiTabs">
			<div class="tabs f f-a-c f-j-b m-0-a">
				<div class="leftTabs">
					<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
						<div v-for="(item, index) in port.tabsList" :key="index">
							<el-tab-pane :label="item.label" :name="index"></el-tab-pane>
						</div>
					</el-tabs>
				</div>
				<div @mouseenter="showDrawer(1)" class="rigTu"><img src="/src/assets/serch/move.png" class="moveImg hand" alt="" /></div>
			</div>
			<div v-show="drawerShow" @click="removePop" class="mask">
				<div @click.stop="showDrawer(2)" class="maskBox animate-fadeInDown">
					<div class="maskBoxShow f f-a-c f-w-w">
						<div v-for="(ite, inde) in port.popoList" @click.stop="sectList(ite, inde)" :key="inde" class="maskItem hand">{{ ite.label }}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 第一个------------------------ -->
		<!-- 47 experts found -->
		<div class="found">
			<div class="foundTop f f-a-c f-j-b">
				<div class="foundLrft">{{ port.foundList?.length || 0 }} Clubs</div>
				<div class="foundRig f f-a-c">
					<div class="sort">Sort by</div>
					<el-dropdown max-height="200" trigger="click">
						<span class="el-dropdown-link hand">
							{{ Price }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item v-for="(ite, index) in priceList" @click="qiePriceLow(ite)" :key="index"
									><div class="f f-a-c f-j-b" style="width: 100%">{{ ite.name }} <img v-if="ite.name == Price" style="width: 15px; margin-left: 15px" src="/src//assets/serch/dui2.png" alt="" /></div>
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
			<!-- Results on KnowClub -->
			<div class="knowClub">
				<!-- <div class="knowClubTit">Results on KnowClub</div> -->
				<div class="knowClubBot f f-a-c f-w-w">
					<div v-for="(item, index) in port.foundList" :key="index" class="knowClubItem">
						<div @click="goProfile(item)" class="knowImgBox hand"><img :src="item.clubImage" alt="" /></div>
						<div class="count f f-a-c f-j-b">
							<div class="f f-a-c">
								<img @click="goProfile(item)" :src="item.avatar" class="avart hand" alt="" />
								<div class="name">
									<div class="budgt o-f-1">{{ item.clubName }}</div>
									<div class="budgid f f-a-c">
										{{ item.userName }}
										<div class="span">{{ item.fansNum }} fans</div>
									</div>
								</div>
							</div>
							<!-- <div class="btn">Join</div> -->
							<div class="btn hand" @click.stop="joinIn(item)" :class="{ activ: item.subscriptionId != null && item.subscriptionId > 0 }">
								{{ item.subscriptionId != null && item.subscriptionId > 0 ? "Joined" : "Join" }}
							</div>
						</div>
					</div>
				</div>
				<div @click="nextPageList" class="moer hand m1280">Moer</div>
			</div>
			<!-- Popular club -->
			<div class="m1280">
				<div class="popular">Popular club</div>
				<div class="knowClub">
					<div class="knowClubBot f f-a-c f-w-w">
						<div v-for="(item, index) in port.popularList" :key="index" class="knowClubItem">
							<div @click="goProfile(item)" class="knowImgBox hand"><img :src="item.clubImage" alt="" /></div>
							<div class="count f f-a-c f-j-b">
								<div class="f f-a-c">
									<img @click="goProfile(item)" :src="item.avatar" class="avart hand" alt="" />
									<div class="name">
										<div class="budgt o-f-1">{{ item.clubName }}</div>
										<div class="budgid f f-a-c">
											{{ item.userName }}
											<div class="span">{{ item.fansNum }} fans</div>
										</div>
									</div>
								</div>
								<!-- <div class="btn">Join</div> -->
								<div class="btn hand" @click.stop="joinIn(item)" :class="{ activ: item.subscriptionId != null && item.subscriptionId > 0 }">
									{{ item.subscriptionId != null && item.subscriptionId > 0 ? "Joined" : "Join" }}
								</div>
							</div>
						</div>
					</div>
				</div>
				<div @click="nextPageListTow" v-if="port.popularList.length < totalTow" class="moer hand m1280">Moer</div>
			</div>
			<!-- Suggest for you -->
			<div class="m1280">
				<div class="popular">Suggest for you</div>
				<div class="knowClub">
					<div class="knowClubBot f f-a-c f-w-w">
						<div v-for="(item, index) in port.suggesList" :key="index" class="knowClubItem">
							<div @click="goProfile(item)" class="knowImgBox hand"><img :src="item.clubImage" alt="" /></div>
							<div class="count f f-a-c f-j-b">
								<div class="f f-a-c">
									<img @click="goProfile(item)" :src="item.avatar" class="avart hand" alt="" />
									<div class="name">
										<div class="budgt o-f-1">{{ item.clubName }}</div>
										<div class="budgid f f-a-c">
											{{ item.userName }}
											<div class="span">{{ item.fansNum }} fans</div>
										</div>
									</div>
								</div>
								<!-- <div class="btn">Join</div> -->
								<div class="btn hand" @click.stop="joinIn(item)" :class="{ activ: item.subscriptionId != null && item.subscriptionId > 0 }">
									{{ item.subscriptionId != null && item.subscriptionId > 0 ? "Joined" : "Join" }}
								</div>
							</div>
						</div>
					</div>
				</div>
				<div @click="nextPageListStree" v-if="port.suggesList.length < totalStree" class="moer hand m1280">Moer</div>
			</div>
			<div class="work">KnowClub contents</div>
			<!-- How does KnowClub work? -->
			<!-- countList -->
			<div class="countList m1280 f f-w-w f-a-c">
				<div v-for="(item, index) in port.contList" :key="index" @click="goClubs(item)" class="hand countItem f f-a-c">
					<div class="lefImg"><img :src="item.image" alt="" /></div>
					<div class="rightBox">
						<div class="topName">{{ item.clubName || "--" }}</div>
						<div class="xiaoName">{{ item.title || "--" }}</div>
						<div class="count">
							{{ item.content }}
						</div>
						<div class="time f f-a-c f-j-b">
							<span>{{ dayjs(item.publishTime).format("DD/MM/YYYY") }}</span>
							<span>More</span>
						</div>
					</div>
				</div>
				<div @click="nextPageListFour" class="moer hand m1280">Moer</div>
			</div>
		</div>
		<Join ref="join" />
		<OutClub @refresh="refresh" ref="outClub" />
		<xpertTabbar />
	</div>
</template>

<script setup>
	import OutClub from "@/components/OutClub/index.vue";
	import Join from "@/components/join/index.vue";
	import { ElMessage, dayjs } from "element-plus";
	import { ArrowDown } from "@element-plus/icons-vue";
	import { ClassificationTree } from "@/api/commonality.js";
	import { ClubList, PopularClubList, SuggestForYouList, ShuffleList, ManageList } from "@/api/knowClub/index.js";
	import { SearchProt } from "@/api/xpert.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { ref, onMounted, reactive } from "vue";
	const activeName = ref(-1);
	// let Price=ref('')
	let statusTab = ref(1);
	let drawerShow = ref(false);
	const addressNmae = ref("Location");
	let tabInd = ref(0);
	let search = ref("");
	let Price = ref("Price: low - high");
	let total = ref(0);
	let outClub = ref("");
	let join = ref("");
	let totalTow = ref(0);
	let totalFour = ref(0);
	let totalStree = ref(0);
	let pageNum = ref(1);
	let pageNumTow = ref(1);
	let pageNumStree = ref(1);
	let pageNumFour = ref(1);
	let priceList = ref([
		{ name: "Price: low - high", id: 1 },
		{ name: "Price: high - low", id: 2 },
		// { name: "Subscription", id: 3 },
		{ name: "FansNum", id: 3 }
	]);
	const topics = ref("");
	let port = reactive({
		tabsList: [],
		popoList: [],
		foundList: [],
		popularList: [],
		suggesList: [],
		contList: [],
		messageList: []
	});
	let cond = reactive({
		price: "lowPrice",
		language: "",
		topics: "",
		areaCode: "",
		industryTow: "",
		industryOne: ""
	});
	const open = ref(false);
	onMounted(async () => {
		await ManageLists();
		await handleClose();
		await handleSearch();
		await popularClubList();
		await suggsList();
		await shuffleList();
		window.addEventListener("scroll", handleScroll);
	});
	// 刷新
	const refresh = async () => {
		console.log("1111111111111111111111111");
		await ManageLists();
		await handleClose();
		await handleSearch();
		await popularClubList();
		await suggsList();
	};

	// /点击加入俱乐部
	const joinIn = item => {
		if (item.subscriptionId != null && item.subscriptionId > 0) {
			outClub.value.id = item.subscriptionStripeId;
			outClub.value.upLoadVisible = true;
			// 代表已经加入俱乐部
		} else {
			// 代表未加入俱乐部
			join.value.obj = item;
			join.value.money = item.subscription;
			join.value.upLoadVisible = true;
		}
	};
	// 点击去个人中心
	const goProfile = item => {
		router.push({
			path: "/PersonalHomepage",
			query: {
				id: item.userId
			}
		});
	};
	// 点击去俱乐部
	const goClubs = item => {
		router.push({
			path: "/Club",
			query: {
				id: item.clubId
			}
		});
	};
	// 点击搜索
	const goSearch = () => {
		handleSearch();
	};
	// 获取输入框提示
	const ManageLists = async () => {
		let n = await ManageList({ title: "kc_popular" });
		port.messageList = n.data;
	};
	// 第四个Popular club列表
	const shuffleList = async () => {
		let n = await ShuffleList({ pageNumFour: pageNumFour.value });
		totalFour.value = n.data.total;
		port.contList = n.data;
	};
	// 第三个Popular club列表
	const suggsList = async () => {
		let n = await SuggestForYouList({ pageNumStree: pageNumStree.value });
		totalStree.value = n.data.total;
		port.suggesList = [...port.suggesList, ...n.data.list];
	};
	// 第二个Popular club列表
	const popularClubList = async () => {
		let n = await PopularClubList({ pagePopNum: pageNumTow.value });
		totalTow.value = n.data.total;
		port.popularList = [...port.popularList, ...n.data.list];
	};
	// 第一个Club点击切换下一页
	const nextPageList = () => {
		// pageNum.value++;
		router.push("/KnowClub/MoreClubs");
		// handleSearch();
	};
	// 第四个Club点击切换下一页
	const nextPageListFour = () => {
		// pageNumFour.value++;
		router.push("/KnowClub/MoreCount");
		// shuffleList();
	};
	// 第二个Club点击切换下一页
	const nextPageListTow = () => {
		pageNumTow.value++;
		popularClubList();
	};
	// 第三个Club点击切换下一页
	const nextPageListStree = () => {
		pageNumStree.value++;
		suggsList();
	};
	// 切换价格
	const qiePriceLow = item => {
		Price.value = item.name;
		handleSearch();
	};
	// tabs
	const handleClick = (tab, e) => {
		cond.industryOne = port.tabsList[tab.index].id;
		console.log(tab.index, e, "123456");
		tabInd.value = tab.index;
		port.popoList = port.tabsList[tabInd.value].children;
		// id存起来
		cond.industry = port.tabsList[tabInd.value].id;
		drawerShow.value = true;
		pageNum.value = 1;
		// 请求
		handleSearch();
	};
	const handleClose = async done => {
		let n = await ClassificationTree();
		port.tabsList = n.data;
		// 默认请求第一个分类
	};
	// 切换tabs
	const sectList = (item, index) => {
		cond.industryTow = item.id;
		drawerShow.value = false;
		if (item.level == 1) {
			activeName.value = index;
		}
		pageNum.value = 1;
		handleSearch();
	};
	const showDrawer = num => {
		port.popoList = port.tabsList;
		drawerShow.value = !drawerShow.value;
	};
	// 搜索接口
	const handleSearch = async () => {
		let obj = {
			industryOne: cond.industryOne || "",
			industryTwo: cond.industryTow || "",
			clubName: search.value || "",
			FansNumSort: Price.value == "FansNum" ? "DESC" : "",
			subscriptionSort: Price.value == "Price: high - low" ? "DESC" : Price.value == "Price: low - high" ? "ASC" : "",
			// clubIdSort: cond.price == "lowPrice" ? "ASC" : "DESC",
			pageNum: pageNum.value
		};
		let n = await ClubList(obj);
		total.value = n.data.total;
		port.foundList = n.data.list;
	};
	// 点击去个人主页
	const goUserInfo = () => {
		router.push("/PersonalHome");
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "1111111");
	};
	// 当移除时
	const removePop = () => {
		drawerShow.value = false;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 10) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
